<template>
  <div>
    <VolBox
      :lazy="true"
      :model.sync="model1"
      title="创建券包"
      :width="1200"
      :height="500"
    >
      <VolForm
        ref="myform1"
        :label-width="100"
        :loadKey="true"
        :formFields="formFields1"
        :formRules="formRules1"
      ></VolForm>
      <div class="DIVD">
        <h3>选择券</h3>
        <el-button
          class="tjBut"
          type="primary"
          @click="model2 = true"
          size="small"
          >添加券</el-button
        >
      </div>
      <VolTable
        ref="editTable1"
        :columns="columns"
        :max-height="370"
        :index="true"
        :ck="false"
        :tableData="tableData"
      ></VolTable>

      <div slot="footer">
        <Button type="default" @click="submit">确认</Button>
        <Button type="default" @click="model1 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox
      :lazy="true"
      :model.sync="model2"
      title="选择券"
      :width="1200"
      :height="500"
    >
      <!-- <VolForm
        ref="myform"
        :label-width="100"
        :loadKey="true"
        :formFields="formFields2"
        :formRules="formRules2"
      ></VolForm> -->
      <VolTable
        ref="editTable2"
        :columns="columns2"
        :max-height="370"
        :index="true"
        :tableData="tableData2"
      ></VolTable>
      <div slot="footer">
        <Button type="default" @click="submit2">确认</Button>
        <Button type="default" @click="model2 = false">关闭</Button>
      </div>
    </VolBox>
    <VolBox
      :lazy="true"
      :model.sync="model3"
      title="选择券"
      :width="600"
      :height="300"
    >
      <VolForm
        ref="myform"
        :label-width="100"
        :loadKey="true"
        :formFields="formFields3"
        :formRules="formRules3"
      ></VolForm>
      <!-- <VolTable
        ref="editTable3"
        :columns="columns2"
        :max-height="370"
        :index="true"
        :tableData="tableData2"
      ></VolTable> -->
      <div slot="footer">
        <Button type="default" @click="submit3">确认</Button>
        <Button type="default" @click="model3 = false">关闭</Button>
      </div>
    </VolBox>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import VolTable from "@/components/basic/VolTable.vue";
var vueParam = {
  components: {
    VolBox,
    VolForm,
    VolTable,
  },
  data() {
    return {
      model1: false,
      formFields1: {
        coupon_name: "",
        // coupon_batch: "",
        coupon_count: "",
        coupon_code: "",
        get_type: 1,
        is_generate: 0,
        useTime: "",
        coupon_note: "",
        coupon_countjf: "",
      },
      formRules1: [
        [
          {
            title: "券包名称",
            field: "coupon_name",
            type: "text",
            required: true,
          },
          //  {
          //   title: "领用规则",
          //   field: "coupon_code",
          //   type: "select",
          //   dataKey: "Coupon_Info",
          //   data: [],
          // },
          {
            title: "数量",
            field: "coupon_count",
            type: "number",
            required: true,
          },
          //  {
          //   title: "使用时间",
          //   field: "useTime",
          //   type: "datetime",
          //   range: true,
          // },
        ],
        [
          {
            title: "描述",
            field: "coupon_note",
            type: "textarea",
            colSize: 12,
          },
        ],
      ],
      columns: [
        {
          field: "coupon_batch",
          title: "批号",
          type: "int",
          width: 120,
          align: "left",
          sortable: true,
        },
        {
          field: "status",
          title: "状态",
          type: "int",
          bind: { key: "MakeCoupon_Status", data: [] },
          width: 120,
          align: "left",
        },
        {
          field: "coupon_name",
          title: "券名称",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          field: "coupon_code",
          title: "优惠券模板名称",
          type: "string",
          width: 150,
          align: "left",
          bind: { data: [] },
        },
        {
          field: "coupon_count",
          title: "数量",
          type: "int",
          width: 120,
          align: "left",
          edit: { type: "number", required: true, min: 1 },
          onChange: (column, row, tableData, value) => {
            // console.log(row, column.coupon_countjf, "row");
            if (column.coupon_countjf >= row ) {
               return;
            }else{
              this.$Message.error("数量不能大于剩余数量");
              column.coupon_count =column.coupon_countjf
              return false
            }
          },
        },
        {
          field: "coupon_countjf",
          title: "剩余数量",
          type: "int",
          width: 120,
          align: "left",
        },
        {
          field: "coupon_note",
          title: "描述",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "amount",
          title: "操作",
          type: "int",
          width: 80,
          fixed: "right",
          align: "left",
          render: (h, { row, column, index }) => {
            return h(
              "button",
              {
                class: "ivu-btn",
                style: {
                  "margin-left": "10px",
                },
                on: {
                  click: () => {
                    this.tableData.splice(index, 1);
                  },
                },
              },
              "删除"
            );
          },
        },
      ],
      tableData: [],
      model2: false,
      formFields2: {
        coupon_name: "",
        idcardtype: "",
        coupon_batch: "",
        member_sex: "",
        idnumber: "",
        member_phone: "",
      },
      formRules2: [
        [
          { title: "卡编号", field: "coupon_batch", type: "text" },
          {
            render: (h, {}) => {
              return h(
                "button",
                {
                  class: "ivu-btn",
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      // console.log(123);
                    },
                  },
                },
                "查询"
              );
            },
          },
        ],
      ],
      columns2: [
        {
          field: "coupon_batch",
          title: "批号",
          type: "int",
          width: 120,
          align: "left",
          sortable: true,
        },
        {
          field: "status",
          title: "状态",
          type: "int",
          bind: { key: "MakeCoupon_Status", data: [] },
          width: 120,
          align: "left",
        },
        {
          field: "coupon_name",
          title: "券名称",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          field: "coupon_code",
          title: "优惠券模板名称",
          type: "string",
          width: 150,
          align: "left",
          bind: { data: [] },
        },
        {
          field: "coupon_count",
          title: "数量",
          type: "int",
          width: 120,
          align: "left",
        },
        {
          field: "take_count",
          title: "已发券数量",
          type: "int",
          width: 120,
          align: "left",
        },
        {
          field: "coupon_note",
          title: "描述",
          type: "string",
          width: 120,
          align: "left",
        },
      ],
      tableData2: [],
      model3: false,
      formFields3: {
        phone: "",
        name: "",
        distributorCode: "",
        certificate_type: "",
        id_card: "",
        coupon_makeid: "",
      },
      formRules3: [
        [
          {
            title: "手机号",
            field: "phone",
            type: "phone",
            required: true,
          },
          {
            render: (h, {}) => {
              return h(
                "button",
                {
                  class: "ivu-btn",
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      let param = {
                        order: "desc",
                        page: 1,
                        rows: 30,
                        sort: "",
                        wheres: `[{\"name\":\"phone\",\"value\":\"${this.formFields3.phone}\",\"displayType\":\"text\"}]`,
                      };
                      this.http
                        .post("/api/SmallUserArchives/GetSmallUserPageData", param)
                        .then((res) => {
                          if (res.rows.length != 0) {
                            // 13463060925
                            this.formFields3.name = res.rows[0].name;
                            this.formFields3.distributorCode =
                              res.rows[0].distributorCode;
                            this.formFields3.certificate_type =
                              res.rows[0].certificate_type;
                            this.formFields3.id_card = res.rows[0].id_card;

                            this.HYZHSTATUS = false;
                          } else {
                            this.HYZHSTATUS = true;
                            this.$refs.myform4.reset();
                          }
                        });
                    },
                  },
                },
                "查询"
              );
            },
          },
        ],
        [
          {
            title: "姓名",
            field: "name",
            type: "text",
            required: true,
          },
          {
            title: "分销商",
            field: "distributorCode",
            type: "select",
            dataKey: "direct_distribution",
            data: [],
            required: true,
          },
        ],
        [
          {
            title: "证件类型",
            field: "certificate_type",
            type: "select",
            dataKey: "certificate_type",
            data: [],
            required: true,
          },
          {
            title: "证件号",
            field: "id_card",
            type: "text",
            required: true,
          },
        ],
      ],
      // tableData3: []
    };
  },
  watch: {
    // ""
  },
  methods: {
    GetVueDictionary() {
      let param = ["Coupon_Type", "MakeCoupon_Status"];
      this.http.post("/api/Dictionary/GetVueDictionary", param).then((res) => {
        res.forEach((o) => {
          if (o.dicNo == "Coupon_Type") {
            this.columns.forEach((j) => {
              if (j.field == "type") {
                j.bind.data = o.data;
              }
            });
            this.columns2.forEach((j) => {
              if (j.field == "type") {
                j.bind.data = o.data;
              }
            });
          } else if (o.dicNo == "MakeCoupon_Status") {
            this.columns.forEach((j) => {
              if (j.field == "status") {
                j.bind.data = o.data;
              }
            });
            this.columns2.forEach((j) => {
              if (j.field == "status") {
                j.bind.data = o.data;
              }
            });
          }
        });
      });
      let parmas = {
        order: "desc",
        page: 1,
        rows: 10000,
        sort: "id",
        wheres: "[]",
      };
      this.http.post("/api/MebCoupon/getPageData", parmas).then((res) => {
        let arr = [];
        res.rows.forEach((j) => {
          let o = {
            key: j.code,
            value: j.name,
          };
          arr.push(o);
        });
        this.columns.forEach((i) => {
          if (i.field == "coupon_code") {
            i.bind.data = arr;
          }
        });
        this.columns2.forEach((i) => {
          if (i.field == "coupon_code") {
            i.bind.data = arr;
          }
        });
      });
    },
    GETHISLIST() {
      let p = {
        order: "desc",
        page: 1,
        rows: 10000,
        sort: "id",
        wheres: '[{"name":"coupon_type","value":"0","displayType":"text"}]',
      };
      this.http.post("/api/MebcouponMake/getPageData", p).then((res) => {
        this.tableData2 = res.rows;
        this.tableData2.forEach((i) => {
          i.coupon_count == i.take_count
            ? (i.DISABLED = true)
            : (i.DISABLED = false);
        });
      });
    },
    submit2() {
      this.model2 = false;
      this.tableData = JSON.parse(
        JSON.stringify(this.$refs.editTable2.$refs.table.selection)
      );
      this.tableData.forEach((i) => {
        i.coupon_countjf = i.coupon_count - i.take_count;
        i.coupon_count = 1;
        // if(i.coupon_count<=i.coupon_countjf) {

        // }
      });
    },
    submit3() {
      let params = {
        member_name: this.formFields3.name,
        member_phone: this.formFields3.phone,
        coupon_makeid: this.formFields3.coupon_makeid,
      };
      this.$refs.myform.validate(() => {
        this.http
        .post("/api/MebCoupon/TakeMemberCoupontag", params)
        .then((res) => {
          // console.log(res.status, "res");
          if (res.status) {
            this.$Message.success("领取成功");
          } else {
            this.$Message.error(res.message);
          }
        });
      });
    },
    submit() {
      if (this.formFields1.coupon_name == "") {
        this.$Message.error("券包名字不能为空");
        return false;
      }
      if (this.formFields1.coupon_count == "") {
        this.$Message.error("数量不能为空");
        return false;
      }

      let parmas = {
        mainData: { ...this.formFields1 },
        detailData: this.tableData,
      };
      parmas.mainData.use_starttime = this.formFields1.useTime[0];
      parmas.mainData.use_endtime = this.formFields1.useTime[1];
      delete parmas.mainData.useTime;
      this.http.post("/api/MebcouponMake/AddCoupontag", parmas).then((res) => {
        if (res.status) {
          this.$Message.success("成功");
          this.model1 = false;
          this.$store.getters.data().viewPageTest.refresh();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
  },
};
export default vueParam;
</script>

<style lang="less" scoped>
.DIVD {
  height: 60px;
  h3 {
    display: inline-block;
  }
  .tjBut {
    float: right;
  }
}
</style>
